<template>
    <div class="editor-container">

        <div class="editor-main">
            <el-form :model="articleForm" :rules="rules" ref="articleForm" label-position="top" size="small">
                <div class="editor-content">
                    <div class="content-card">
                        <div class="title-cover-layout">
                            <div class="title-section">
                                <el-form-item label="文章标题" prop="title">
                                    <el-input v-model="articleForm.title" placeholder="请输入文章标题..." />
                                </el-form-item>
                                <el-form-item label="文章描述" prop="summary">
                                    <el-input v-model="articleForm.summary" type="textarea" :rows="4"
                                        placeholder="请输入文章描述..." />
                                </el-form-item>
                            </div>
                            <div class="cover-section">
                                <el-form-item label="封面图片" prop="cover">
                                    <div class="cover-area" @click="triggerCoverUpload">
                                        <div v-if="!articleForm.cover" class="cover-placeholder">
                                            <i class="fas fa-image"></i>
                                            <span>点击上传封面图</span>
                                        </div>
                                        <div v-else class="cover-preview">
                                            <img :src="articleForm.cover" alt="文章封面">
                                            <div class="cover-actions">
                                                <el-button size="small" circle type="danger" @click.stop="removeCover">
                                                    <i class="fas fa-trash"></i>
                                                </el-button>
                                            </div>
                                        </div>
                                    </div>
                                    <input ref="coverInput" type="file" accept="image/*" @change="handleCoverUpload"
                                        style="display: none">
                                </el-form-item>
                            </div>
                        </div>
                    </div>

                    <div class="content-card flex-card">
                        <el-form-item label="文章内容" prop="contentMd" class="mb-20">
                            <div class="ai-assistant-toolbar">
                                <el-button size="small" type="primary" @click="showAiDialog" :loading="aiLoading && !isAiWriting">
                                    <i class="fas fa-robot"></i> AI助手帮我写作
                                </el-button>
                                <div class="ai-status" v-if="isAiWriting">
                                    <i class="fas fa-sync fa-spin"></i> 
                                    <span>AI正在写作中...</span>
                                    <span class="ai-time">{{ formatRemainingTime }}</span>
                                    <el-button size="mini" type="danger" @click="stopGeneration">停止</el-button>
                                </div>
                            </div>
                            <mavon-editor
                                placeholder="输入文章内容..."
                                style="height: 500px; width: 100%"
                                ref="mdRef"
                                v-model="articleForm.contentMd"
                                @imgDel="imgDel"
                                @imgAdd="imgAdd"
                                previewBackground="var(--card-bg)"
                                toolbarsBackground="var(--card-bg)"
                                toolbarsBackgroundImage="var(--card-bg)"
                            />
                        </el-form-item>
                    </div>
                </div>

                <div class="editor-sidebar">
                    <div class="sidebar-section">
                        <h3 class="section-title">
                            <i class="fas fa-folder"></i>
                            文章分类
                        </h3>
                        <el-form-item prop="categoryId">
                            <el-select v-model="articleForm.categoryId" placeholder="请选择分类">
                                <el-option v-for="item in categories" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <div class="ai-suggest">
                            <el-button size="small" type="text" @click="suggestCategoryAndTags" :loading="aiSuggesting">
                                <i class="fas fa-robot"></i> AI推荐分类和标签
                            </el-button>
                        </div>
                    </div>

                    <div class="sidebar-section">
                        <h3 class="section-title">
                            <i class="fas fa-tags"></i>
                            文章标签
                        </h3>
                        <el-form-item prop="tagIds">
                            <el-select v-model="articleForm.tagIds" multiple filterable allow-create default-first-option
                                placeholder="请选择标签">
                                <el-option v-for="item in tags" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>

                    <div class="sidebar-section">
                        <h3 class="section-title">
                            <i class="fas fa-cog"></i>
                            文章设置
                        </h3>
                        <div class="setting-item">
                            <el-switch v-model="articleForm.isOriginal" :active-value="1" :inactive-value="0" active-text="原创文章">
                            </el-switch>
                        </div>
                        <div class="setting-item" v-if="!articleForm.isOriginal">
                            <div class="setting-label">转载地址：</div>
                            <el-form-item prop="originalUrl">
                                <el-input v-model="articleForm.originalUrl" placeholder="请输入原文地址" size="small" />
                            </el-form-item>
                        </div>
                        <div class="setting-item">
                            <div class="setting-label">关键词：</div>
                            <el-form-item prop="keywords">
                                <el-input v-model="articleForm.keywords" placeholder="请输入关键词（多个用逗号隔开）" size="small" />
                            </el-form-item>
                        </div>
                    </div>
                    <div class="sidebar-section">
                        <div class="setting-item">
                            <el-button size="small" @click="saveDraft">
                                <i class="fas fa-save"></i>
                                保存草稿
                            </el-button>
                            <el-button size="small" type="primary" @click="publishArticle">
                                <i class="fas fa-paper-plane"></i>
                                提交审核
                            </el-button>
                        </div>
                    </div>

                </div>
            </el-form>
        </div>

        <!-- AI助手对话框 -->
        <el-dialog
            title="AI写作助手"
            :visible.sync="aiDialogVisible"
            width="600px"
            :close-on-click-modal="false"
            :modal="false"
            @closed="handleDialogClosed"
            :before-close="handleBeforeClose"
        >
            <div class="ai-dialog-content">
                <p class="ai-description">
                    AI写作助手可以帮助你生成文章内容，只需提供简单的主题或关键词，即可获得高质量的文章建议。
                </p>
                
                <el-form ref="aiForm" :model="aiForm" label-position="top">
                    <el-form-item label="生成方式">
                        <el-radio-group v-model="aiForm.mode" @change="handleModeChange">
                            <el-radio label="full">完整文章</el-radio>
                            <el-radio label="outline">文章大纲</el-radio>
                            <el-radio label="continue">续写当前内容</el-radio>
                            <el-radio label="csdn">CSDN参考</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    
                    <el-form-item v-if="aiForm.mode === 'csdn'" label="CSDN参考" prop="csdnRef">
                        <el-input 
                            v-model="aiForm.csdnRef"
                            placeholder="输入CSDN文章链接或搜索关键词"
                            clearable
                        >
                            <template slot="prepend">
                                <el-select v-model="aiForm.csdnType" style="width: 110px">
                                    <el-option label="搜索关键词" value="search"></el-option>
                                    <el-option label="文章链接" value="url"></el-option>
                                </el-select>
                            </template>
                            <template slot="append" v-if="aiForm.csdnType === 'url'">
                                <el-button @click="previewCsdnContent" :disabled="!aiForm.csdnRef || fetchingCsdn" icon="el-icon-download">
                                    {{ fetchingCsdn ? '获取中...' : '预览' }}
                                </el-button>
                            </template>
                        </el-input>
                        <div v-if="csdnPreview" class="csdn-preview">
                            <div class="preview-header">
                                <div>CSDN文章预览</div>
                                <el-button type="text" icon="el-icon-close" @click="csdnPreview = null"></el-button>
                            </div>
                            <div class="preview-content" v-html="csdnPreview"></div>
                        </div>
                    </el-form-item>
                    
                    <el-form-item v-else label="写作主题" prop="topic" :rules="[{ required: true, message: '请输入写作主题', trigger: 'blur' }]">
                        <el-input v-model="aiForm.topic" placeholder="请输入你想写的主题，例如：Vue3新特性详解"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="写作指引" prop="prompt">
                        <el-input 
                            type="textarea" 
                            v-model="aiForm.prompt" 
                            :rows="3"
                            placeholder="可以提供更详细的写作要求，比如：详细讲解Vue3的Composition API、响应式系统和性能优化"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="实时显示生成进度">
                        <el-switch v-model="aiForm.showProgress" active-color="#13ce66"></el-switch>
                        <span class="form-hint">开启后将在编辑器中实时显示生成内容</span>
                    </el-form-item>

                    <el-form-item v-if="isAiWriting" label="生成进度">
                        <el-progress 
                            :percentage="generationProgress" 
                            :format="formatProgressTime"
                            :status="generationProgress < 100 ? '' : 'success'"
                        ></el-progress>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="generateContent" :loading="aiLoading && !isAiWriting">
                    <span v-if="!isAiWriting">生成内容</span>
                    <span v-else>生成中...</span>
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { uploadFileApi, deleteFileApi } from '@/api/file'
import { createArticleApi, updateArticleApi, getArticleInfoApi } from '@/api/article'
import { getTagsApi,getCategoriesApi } from '@/api/tags'
import { getDictDataApi } from '@/api/dict'
import { extractCsdnContentApi } from '@/api/proxy'
import axios from 'axios'

export default {
    name: 'Editor',
    data() {
        return {
            articleForm: {
                title: '',
                summary: '',
                content: '',
                contentMd: '',
                cover: '',
                keywords: '',
                isOriginal: 1,
                originalUrl: '',
                categoryId: '',
                tagIds: [],
                status: ''
            },
            rules: {
                title: [
                    { required: true, message: '请输入文章标题', trigger: 'blur' },
                    { min: 5, max: 100, message: '标题长度应在5-100个字符之间', trigger: 'blur' }
                ],
                summary: [
                    { required: true, message: '请输入文章描述', trigger: 'blur' },
                    { min: 10, max: 500, message: '描述长度应在10-500个字符之间', trigger: 'blur' }
                ],
                contentMd: [
                    { required: true, message: '请输入文章内容', trigger: 'blur' },
                    { 
                        validator: (rule, value, callback) => {
                            if (!value) {
                                callback();
                                return;
                            }
                            
                            // 检查最小长度
                            if (value.length < 50) {
                                callback(new Error('文章内容至少需要50个字符'));
                                return;
                            }

                            // 检查重复字符
                            const repeatedCharPattern = /(.)\1{4,}/;

                            // 检查内容是否有意义
                            const meaninglessPattern = /^[a-zA-Z]{10,}$/;
                            if (meaninglessPattern.test(value)) {
                                callback(new Error('文章内容似乎没有实际意义，请认真编写'));
                                return;
                            }


                            callback();
                        }, 
                        trigger: ['blur', 'change'] 
                    }
                ],
                cover: [
                    { required: true, message: '请上传封面图片', trigger: 'change' }
                ],
                categoryId: [
                    { required: true, message: '请选择文章分类', trigger: 'change' }
                ],
                tagIds: [
                    { required: true, message: '请选择文章标签', trigger: 'change' },
                    { 
                        validator: (rule, value, callback) => {
                            if (value.length > 3) {
                                callback(new Error('最多只能选择3个标签'));
                            } else {
                                callback();
                            }
                        }, 
                        trigger: 'change' 
                    }
                ],
                originalUrl: [
                    { required: true, message: '请输入原文地址', trigger: 'blur' },
                    { type: 'url', message: '请输入有效的URL地址', trigger: 'blur' }
                ],
                keywords: [
                    { 
                        validator: (rule, value, callback) => {
                            if (value && value.split(',').length > 5) {
                                callback(new Error('关键词最多不超过5个'));
                            } else {
                                callback();
                            }
                        }, 
                        trigger: 'blur' 
                    }
                ]
            },
            categories: [],
            tags: [],
            isSubmitting: false,
            statusList: [],
            // AI助手相关数据
            aiDialogVisible: false,
            aiLoading: false,
            isAiWriting: false,
            aiSuggesting: false,
            streamController: null,
            generationProgress: 0,
            generationStartTime: null,
            estimatedTotalTime: 60, // 初始预计60秒
            generationTimer: null,
            backgroundGeneration: false,
            tokensGenerated: 0,
            aiForm: {
                topic: '',
                prompt: '',
                mode: 'full',
                csdnRef: '',
                csdnType: 'search',
                showProgress: true
            },
            aiApiKey: 'sk-vtyikbtifutklfoqyvtztqkiverladsixghbzrqvhembjfbz',
            csdnPreview: null,
            fetchingCsdn: false
        }
    },
    computed: {
        formatRemainingTime() {
            if (!this.isAiWriting) return '';
            const elapsed = (Date.now() - this.generationStartTime) / 1000;
            const remaining = Math.max(0, Math.round(this.estimatedTotalTime - elapsed));
            return `剩余约 ${remaining} 秒`;
        }
    },
    created() {
        getCategoriesApi().then(res => {
            this.categories = res.data
        })
        getTagsApi().then(res => {
            this.tags = res.data
        })
        getDictDataApi(['article_status']).then(res => {
            this.statusList = res.data
        })
        this.articleForm.id = this.$route.query.id
        if (this.articleForm.id) {
            getArticleInfoApi(this.articleForm.id).then(res => {
                this.articleForm = res.data
            })
        }
    },
    methods: {
        /**
         * 显示AI助手对话框
         */
        showAiDialog() {
            // 如果有标题，则预填充到AI主题中
            if (this.articleForm.title) {
                this.aiForm.topic = this.articleForm.title;
            }
            this.aiDialogVisible = true;
        },
        
        /**
         * 处理模式变更
         */
        handleModeChange(mode) {
            // 当模式切换到CSDN模式时，重置topic
            if (mode === 'csdn') {
                this.aiForm.topic = '';
            } else if (this.aiForm.mode === 'csdn') {
                // 从CSDN模式切换回来时，如果有关键词则设为topic
                if (this.aiForm.csdnRef && this.aiForm.csdnType === 'search') {
                    this.aiForm.topic = this.aiForm.csdnRef;
                }
            }
        },
        
        /**
         * 处理对话框关闭
         */
        handleDialogClosed() {
            // 不再中止请求，而是设置为后台生成
            // 这里不做任何处理，让生成继续进行
        },
        
        /**
         * 停止生成
         */
        stopGeneration() {
            if (this.streamController) {
                this.streamController.abort();
                this.streamController = null;
                this.isAiWriting = false;
                this.aiLoading = false;
                this.clearTimers();
                this.$message.info('已停止AI内容生成');
            }
        },

        /**
         * 清除定时器
         */
        clearTimers() {
            if (this.generationTimer) {
                clearInterval(this.generationTimer);
                this.generationTimer = null;
            }
        },

        /**
         * 格式化进度时间
         */
        formatProgressTime(percentage) {
            if (percentage >= 100) return '完成';
            const remainingSeconds = Math.round((100 - percentage) * this.estimatedTotalTime / 100);
            return `剩余约 ${remainingSeconds} 秒`;
        },
        
        /**
         * 关闭对话框但继续生成
         */
        closeDialog() {
            // 如果正在生成内容，设置为后台生成
            if (this.isAiWriting) {
                this.backgroundGeneration = true;
                this.$message.info('AI将在后台继续生成内容，您可以在编辑器中看到实时进度');
            }
            this.aiDialogVisible = false;
        },
        
        /**
         * 对话框关闭前处理
         */
        handleBeforeClose(done) {
            // 如果正在生成内容，设置为后台生成
            if (this.isAiWriting) {
                this.backgroundGeneration = true;
                this.$message.info('AI将在后台继续生成内容，您可以在编辑器中看到实时进度');
            }
            done();
        },
        
        /**
         * 生成AI内容
         */
        async generateContent() {
            // CSDN模式特殊验证
            if (this.aiForm.mode === 'csdn' && !this.aiForm.csdnRef) {
                this.$message.warning('请输入CSDN参考信息');
                return;
            }
            
            // 其他模式使用常规验证
            if (this.aiForm.mode !== 'csdn') {
                const valid = await this.$refs.aiForm.validate().catch(() => false);
                if (!valid) return;
            }
            
            try {
                this.aiLoading = true;
                this.isAiWriting = true;
                this.generationProgress = 0;
                this.tokensGenerated = 0;
                this.backgroundGeneration = false;
                this.generationStartTime = Date.now();
                
                // 开始进度更新计时器
                this.startProgressTimer();
                
                let prompt = '';
                let currentContent = '';
                
                // 根据不同模式构建不同的prompt
                switch (this.aiForm.mode) {
                    case 'full':
                        prompt = `请撰写一篇关于"${this.aiForm.topic}"的详细文章。使用Markdown格式。`;
                        break;
                    case 'outline':
                        prompt = `请为主题"${this.aiForm.topic}"生成一个详细的文章大纲，使用Markdown格式，包括标题、副标题和每个部分需要覆盖的要点。`;
                        break;
                    case 'continue':
                        currentContent = this.articleForm.contentMd;
                        prompt = `下面是一篇关于"${this.aiForm.topic}"的文章的开头部分，请续写并完善它，保持风格一致，使用Markdown格式：\n\n${currentContent}`;
                        break;
                    case 'csdn':
                        if (this.aiForm.csdnType === 'search') {
                            prompt = `请你模拟一篇CSDN上关于"${this.aiForm.csdnRef}"的高质量技术文章，包含代码示例和详细解释。使用Markdown格式，确保内容专业、准确且有深度，参考CSDN上流行技术文章的风格。文章需要包含引言、主要内容（包含代码示例）、总结等完整结构。`;
                        } else {
                            // 尝试获取CSDN文章内容
                            this.$message.info('正在获取CSDN文章内容...');
                            try {
                                const csdnContent = await this.fetchCsdnContent(this.aiForm.csdnRef);
                                if (csdnContent) {
                                    prompt = `以下是CSDN文章的内容，请基于此内容创作一篇类似主题但经过完全重写的原创技术文章，使用Markdown格式。\n\n文章内容：\n${csdnContent}\n\n请创作一篇原创文章，保持主题相似但表达方式和内容组织完全不同，提供独特的见解、代码示例和实用建议。确保内容专业、有深度且结构完整。`;
                                } else {
                                    prompt = `假设你看到了一篇CSDN链接为"${this.aiForm.csdnRef}"的文章，请基于你的知识，创作一篇类似主题的原创技术文章，使用Markdown格式。不要直接复制，而是提供独特的见解、代码示例和实用建议。请确保内容专业、有深度且结构完整。`;
                                    this.$message.warning('无法获取CSDN文章内容，将使用AI知识生成相似文章');
                                }
                            } catch (error) {
                                console.error('获取CSDN内容失败:', error);
                                prompt = `假设你看到了一篇CSDN链接为"${this.aiForm.csdnRef}"的文章，请基于你的知识，创作一篇类似主题的原创技术文章，使用Markdown格式。不要直接复制，而是提供独特的见解、代码示例和实用建议。请确保内容专业、有深度且结构完整。`;
                                this.$message.warning('获取CSDN文章失败，将使用AI知识生成相似文章');
                            }
                        }
                        break;
                }
                
                // 添加用户的额外提示
                if (this.aiForm.prompt) {
                    prompt += `\n\n额外要求：${this.aiForm.prompt}`;
                }
                
                // 预估总时间，根据模式和内容长度调整
                this.estimateGenerationTime(prompt);
                
                // 调用AI API，使用流式响应
                if (this.aiForm.showProgress) {
                    // 如果是续写模式，保留原有内容
                    if (this.aiForm.mode === 'continue') {
                        // 不清空内容，保留原文
                    } else {
                        // 清空内容区域，准备实时显示
                        this.articleForm.contentMd = '';
                    }
                    
                    // 使用流式响应
                    await this.streamAiContent(prompt, currentContent);
                } else {
                    // 使用常规响应
                    const response = await this.callAiApi(prompt);
                    
                    // 处理响应
                    if (this.aiForm.mode === 'continue') {
                        // 续写模式：将AI内容附加到现有内容后
                        this.articleForm.contentMd = currentContent + '\n\n' + response;
                    } else {
                        // 其他模式：直接替换内容
                        this.articleForm.contentMd = response;
                    }
                }
                
                // 提取标题和摘要
                this.extractTitleAndSummary();
                
                // 生成完成，更新UI
                this.generationProgress = 100;
                this.$message.success('AI内容生成成功！');
                
                // 如果不是后台生成，则关闭对话框
                if (!this.backgroundGeneration) {
                    this.aiDialogVisible = false;
                }
                
            } catch (error) {
                if (error.name !== 'AbortError') {
                    console.error('AI内容生成失败:', error);
                    this.$message.error('AI内容生成失败：' + (error.message || '未知错误'));
                }
            } finally {
                // 完成后清除定时器
                this.clearTimers();
                
                // 设置加载和写作状态
                this.aiLoading = false;
                this.isAiWriting = false;
                this.backgroundGeneration = false;
                
                if (this.streamController) {
                    this.streamController = null;
                }
            }
        },

        /**
         * 获取CSDN文章内容
         */
        async fetchCsdnContent(url) {
            try {
                // 检查URL格式
                if (!url.includes('csdn.net') && !url.startsWith('http')) {
                    this.$message.info('尝试将输入解析为CSDN链接...');
                    // 尝试补全URL
                    url = `https://blog.csdn.net/${url}`;
                }
                
                console.log('尝试获取CSDN内容:', url);
                this.$message.info('正在尝试获取CSDN文章内容，这可能需要一些时间...');
                
                // 首先尝试使用后端代理
                try {
                    console.log('尝试使用后端代理...');
                    const response = await extractCsdnContentApi(url);
                    
                    if (response.code === 200) {
                        console.log('后端代理获取内容成功');
                        this.$message.success('获取CSDN文章内容成功!');
                        return this.processCsdnContent(response.data);
                    } else {
                        console.warn('后端代理返回错误:', response.message);
                        // 继续使用客户端方法
                    }
                } catch (backendError) {
                    console.warn('后端代理调用失败，尝试客户端方法:', backendError);
                    // 继续使用客户端方法
                }
                
                // 如果后端代理失败，尝试使用客户端解析
                try {
                    console.log('尝试使用客户端解析方法...');
                    const clientContent = await this.fetchCsdnContentClient(url);
                    
                    if (clientContent) {
                        console.log('客户端解析成功');
                        this.$message.success('获取CSDN文章内容成功!');
                        return clientContent;
                    } else {
                        throw new Error('客户端解析返回空内容');
                    }
                } catch (clientError) {
                    console.error('客户端获取CSDN内容也失败:', clientError);
                    this.$message.error(`无法获取CSDN内容: ${clientError.message}`);
                    return null;
                }
            } catch (error) {
                console.error('获取CSDN内容主方法出错:', error);
                this.$message.error(`获取CSDN内容失败: ${error.message}`);
                return null;
            }
        },
        
        /**
         * 客户端尝试获取CSDN内容（受跨域限制，可能不可用）
         */
        async fetchCsdnContentClient(url) {
            // 检查URL格式
            if (!url.includes('csdn.net') && !url.includes('blog.csdn.net')) {
                this.$message.warning('请输入有效的CSDN文章链接，如https://blog.csdn.net/username/article/details/123456');
                return null;
            }
            
            // 确保URL是完整的
            if (!url.startsWith('http')) {
                url = 'https://' + url;
            }
            
            // 尝试多个CORS代理
            const corsProxies = [
                'https://corsproxy.io/?',
                'https://api.allorigins.win/raw?url=',
                'https://cors-anywhere.herokuapp.com/',
                'https://crossorigin.me/'
            ];
            
            for (const proxy of corsProxies) {
                try {
                    console.log(`尝试使用CORS代理: ${proxy}`);
                    this.$message.info(`尝试使用代理服务器获取内容...`);
                    
                    // 添加超时处理
                    const controller = new AbortController();
                    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10秒超时
                    
                    const response = await fetch(proxy + encodeURIComponent(url), {
                        method: 'GET',
                        signal: controller.signal,
                        headers: {
                            'Origin': window.location.origin,
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });
                    
                    clearTimeout(timeoutId);
                    
                    if (!response.ok) {
                        throw new Error(`HTTP错误 ${response.status}`);
                    }
                    
                    const html = await response.text();
                    
                    // 解析HTML内容
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(html, 'text/html');
                    
                    // 提取标题
                    const title = doc.querySelector('h1')?.textContent || 
                                 doc.querySelector('.title-article')?.textContent || 
                                 'CSDN文章';
                    
                    // 尝试不同的选择器来定位文章内容
                    const articleSelectors = [
                        'article',
                        '.article-content',
                        '.blog-content-box',
                        '#article_content',
                        '#content_views',
                        '.article_content'
                    ];
                    
                    let article = null;
                    for (const selector of articleSelectors) {
                        article = doc.querySelector(selector);
                        if (article) break;
                    }
                    
                    if (!article) {
                        console.error('无法找到文章内容');
                        continue; // 尝试下一个代理
                    }
                    
                    // 提取文本内容
                    let content = `# ${title}\n\n`;
                    
                    // 提取原文链接和作者
                    const author = doc.querySelector('.follow-nickName')?.textContent || 
                                  doc.querySelector('.name')?.textContent;
                    
                    if (author) {
                        content += `> 作者: ${author}\n\n`;
                    }
                    
                    content += `> 原文链接: [${title}](${url})\n\n`;
                    
                    // 提取正文和图片
                    // 查找所有有意义的内容元素
                    const contentElements = article.querySelectorAll('p, pre, code, h1, h2, h3, h4, h5, h6, img, table, ul, ol, li');
                    
                    for (const el of contentElements) {
                        const tagName = el.tagName.toLowerCase();
                        
                        // 忽略空元素
                        if (!el.textContent.trim() && tagName !== 'img') continue;
                        
                        // 根据不同标签处理
                        switch(tagName) {
                            case 'img':
                                const src = el.getAttribute('src');
                                if (src && !src.startsWith('data:')) {
                                    // 确保图片URL是绝对路径
                                    let imgSrc = src;
                                    if (src.startsWith('/')) {
                                        imgSrc = new URL(src, 'https://blog.csdn.net').href;
                                    }
                                    content += `![图片](${imgSrc})\n\n`;
                                }
                                break;
                                
                            case 'h1':
                            case 'h2':
                            case 'h3':
                            case 'h4':
                            case 'h5':
                            case 'h6':
                                // 提取级别数字
                                const level = parseInt(tagName.charAt(1));
                                content += `${'#'.repeat(level)} ${el.textContent.trim()}\n\n`;
                                break;
                                
                            case 'pre':
                                // 处理代码块
                                let codeContent = el.textContent.trim();
                                let language = '';
                                
                                // 尝试检测语言
                                const codeEl = el.querySelector('code');
                                if (codeEl && codeEl.className) {
                                    const langMatch = codeEl.className.match(/language-(\w+)/);
                                    if (langMatch) {
                                        language = langMatch[1];
                                    }
                                }
                                
                                content += `\`\`\`${language}\n${codeContent}\n\`\`\`\n\n`;
                                break;
                                
                            case 'code':
                                // 内联代码
                                if (el.parentElement.tagName.toLowerCase() !== 'pre') {
                                    content += `\`${el.textContent.trim()}\``;
                                }
                                break;
                                
                            case 'ul':
                            case 'ol':
                                // 这些元素的处理会由各自的li元素处理
                                break;
                                
                            case 'li':
                                const parent = el.parentElement.tagName.toLowerCase();
                                if (parent === 'ol') {
                                    // 有序列表项
                                    content += `1. ${el.textContent.trim()}\n`;
                                } else if (parent === 'ul') {
                                    // 无序列表项
                                    content += `- ${el.textContent.trim()}\n`;
                                }
                                // 如果是列表的最后一项，添加一个额外的换行
                                if (!el.nextElementSibling) {
                                    content += '\n';
                                }
                                break;
                                
                            case 'table':
                                // 简单的表格转换
                                content += this.convertTableToMarkdown(el);
                                break;
                                
                            case 'p':
                            default:
                                // 普通段落
                                const text = el.textContent.trim();
                                if (text) content += text + '\n\n';
                                break;
                        }
                    }
                    
                    // 成功获取内容，返回处理后的结果
                    return content;
                    
                } catch (error) {
                    console.error('使用代理获取CSDN内容失败:', proxy, error);
                    continue; // 尝试下一个代理
                }
            }
            
            // 所有代理都失败
            this.$message.error('无法获取CSDN内容。请检查链接是否正确，或联系管理员启用后端代理。');
            return null;
        },

        /**
         * 转换HTML表格为Markdown表格
         */
        convertTableToMarkdown(tableElement) {
            if (!tableElement) return '';
            
            let result = '\n';
            const rows = tableElement.querySelectorAll('tr');
            
            if (!rows.length) return '';
            
            // 处理表头
            const headerRow = rows[0];
            const headers = headerRow.querySelectorAll('th');
            
            if (headers.length) {
                // 添加表头
                result += '| ' + Array.from(headers).map(th => th.textContent.trim()).join(' | ') + ' |\n';
                // 添加分隔行
                result += '| ' + Array.from(headers).map(() => '---').join(' | ') + ' |\n';
            } else {
                // 如果没有th，使用第一行td作为表头
                const firstRowCells = headerRow.querySelectorAll('td');
                if (firstRowCells.length) {
                    result += '| ' + Array.from(firstRowCells).map(td => td.textContent.trim()).join(' | ') + ' |\n';
                    result += '| ' + Array.from(firstRowCells).map(() => '---').join(' | ') + ' |\n';
                } else {
                    return ''; // 表格没有单元格
                }
            }
            
            // 处理数据行（如果第一行是表头，从第二行开始）
            const startRow = headers.length ? 1 : 0;
            for (let i = startRow + 1; i < rows.length; i++) {
                const cells = rows[i].querySelectorAll('td');
                if (cells.length) {
                    result += '| ' + Array.from(cells).map(td => td.textContent.trim()).join(' | ') + ' |\n';
                }
            }
            
            return result + '\n';
        },

        /**
         * 处理从后端返回的CSDN内容
         */
        processCsdnContent(data) {
            try {
                let content = '';
                
                // 添加标题
                if (data.title) {
                    content += `# ${data.title}\n\n`;
                }
                
                // 添加作者信息
                if (data.author) {
                    content += `作者: ${data.author}\n\n`;
                }
                
                // 添加正文内容
                if (data.content) {
                    content += data.content + '\n\n';
                }
                
                // 添加图片
                if (data.images && data.images.length > 0) {
                    content += '## 文章图片\n\n';
                    data.images.forEach((img, index) => {
                        content += `![图片${index+1}](${img})\n\n`;
                    });
                }
                
                // 添加代码块
                if (data.codeBlocks && data.codeBlocks.length > 0) {
                    content += '## 代码示例\n\n';
                    data.codeBlocks.forEach((code, index) => {
                        const language = code.language || '';
                        content += `\`\`\`${language}\n${code.content}\n\`\`\`\n\n`;
                    });
                }
                
                return content;
            } catch (error) {
                console.error('处理CSDN内容失败:', error);
                return null;
            }
        },

        /**
         * 开始进度更新计时器
         */
        startProgressTimer() {
            this.clearTimers();
            this.generationTimer = setInterval(() => {
                // 计算经过的时间占总时间的百分比
                const elapsed = (Date.now() - this.generationStartTime) / 1000;
                const progressPercent = Math.min(95, (elapsed / this.estimatedTotalTime) * 100);
                
                // 更新进度
                this.generationProgress = progressPercent;
                
                // 如果已经接近完成但还没完成，调整总时间估计
                if (progressPercent > 90 && this.tokensGenerated > 0) {
                    // 根据当前进度和已生成的token调整总时间
                    const tokenRate = this.tokensGenerated / elapsed; // 每秒生成的token数
                    const estimatedTokensTotal = 3000; // 假设总共要生成3000个token
                    const remainingTokens = estimatedTokensTotal - this.tokensGenerated;
                    
                    if (tokenRate > 0 && remainingTokens > 0) {
                        const remainingTime = remainingTokens / tokenRate;
                        this.estimatedTotalTime = elapsed + remainingTime;
                    }
                }
            }, 1000);
        },
        
        /**
         * 根据提示内容预估生成时间
         */
        estimateGenerationTime(prompt) {
            // 基础生成时间估计为30秒
            let baseTime = 30;
            
            // 根据模式调整
            switch (this.aiForm.mode) {
                case 'full':
                    baseTime = 60; // 完整文章需要更长时间
                    break;
                case 'outline':
                    baseTime = 30; // 大纲相对较快
                    break;
                case 'continue':
                    baseTime = 45; // 续写介于两者之间
                    break;
                case 'csdn':
                    baseTime = 75; // CSDN参考通常需要更长时间
                    break;
            }
            
            // 根据提示长度调整
            const promptLength = prompt.length;
            if (promptLength > 500) {
                baseTime += 15; // 较长的提示可能需要更多处理时间
            }
            
            this.estimatedTotalTime = baseTime;
        },

        /**
         * 流式获取AI内容
         */
        async streamAiContent(prompt, currentContent) {
            try {
                // 创建 AbortController 用于取消请求
                this.streamController = new AbortController();
                const signal = this.streamController.signal;
                
                // 准备显示区域
                let fullContent = currentContent ? currentContent + '\n\n' : '';
                let originalContent = fullContent;
                let accumulatedContent = '';
                
                const response = await fetch('https://api.siliconflow.cn/v1/chat/completions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${this.aiApiKey}`
                    },
                    body: JSON.stringify({
                        model: "deepseek-ai/DeepSeek-R1-0528-Qwen3-8B",
                        messages: [
                            {
                                role: "system",
                                content: "你是一位专业的技术文章创作助手，擅长撰写高质量的Markdown格式文章。你的文章要有深度、有逻辑性，观点鲜明，论述有力，包含实用的代码示例和详细解释。"
                            },
                            {
                                role: "user",
                                content: prompt
                            }
                        ],
                        temperature: 0.7,
                        max_tokens: 3000,
                        stream: true
                    }),
                    signal
                });

                const reader = response.body.getReader();
                const decoder = new TextDecoder("utf-8");
                
                // 处理流式响应
                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;
                    
                    // 解码返回的数据
                    const chunk = decoder.decode(value, { stream: true });
                    // 处理SSE格式的数据
                    const lines = chunk.split('\n');
                    
                    for (const line of lines) {
                        if (line.startsWith('data:')) {
                            try {
                                const data = line.substring(5).trim();
                                if (data === '[DONE]') continue;
                                
                                const parsedData = JSON.parse(data);
                                if (parsedData.choices && parsedData.choices.length > 0) {
                                    const content = parsedData.choices[0].delta?.content || '';
                                    if (content) {
                                        accumulatedContent += content;
                                        // 更新生成的token数量，用于计算剩余时间
                                        this.tokensGenerated += content.length / 4; // 粗略估计，每4个字符约为1个token
                                        // 实时更新编辑器
                                        this.articleForm.contentMd = originalContent + accumulatedContent;
                                    }
                                }
                            } catch (e) {
                                console.error('解析SSE数据错误', e);
                            }
                        }
                    }
                }
                
                return accumulatedContent;
            } catch (error) {
                if (error.name === 'AbortError') {
                    console.log('AI内容生成已取消');
                    throw error;
                }
                console.error('流式获取AI内容失败:', error);
                throw error;
            }
        },
        
        /**
         * 提取标题和摘要
         */
        extractTitleAndSummary() {
            const content = this.articleForm.contentMd;
            
            // 如果标题为空，尝试从AI回复中提取标题
            if (!this.articleForm.title && (this.aiForm.mode === 'full' || this.aiForm.mode === 'csdn')) {
                const titleMatch = content.match(/^#\s+(.+)$/m);
                if (titleMatch && titleMatch[1]) {
                    this.articleForm.title = titleMatch[1];
                } else if (this.aiForm.mode === 'csdn' && this.aiForm.csdnRef) {
                    // 对于CSDN模式，可以用关键词作为标题
                    this.articleForm.title = this.aiForm.csdnRef;
                } else if (this.aiForm.topic) {
                    this.articleForm.title = this.aiForm.topic;
                }
            }

            // 如果是CSDN参考模式且描述为空，自动生成描述
            if ((this.aiForm.mode === 'csdn' || this.aiForm.mode === 'full') && !this.articleForm.summary) {
                const firstPara = content.split('\n\n').find(p => !p.startsWith('#') && p.length > 30);
                if (firstPara) {
                    this.articleForm.summary = firstPara.slice(0, 150).replace(/[#*`]/g, '') + '...';
                }
            }
        },
        
        /**
         * AI推荐分类和标签
         */
        async suggestCategoryAndTags() {
            // 检查文章内容是否存在
            if (!this.articleForm.contentMd || this.articleForm.contentMd.trim().length < 50) {
                this.$message.warning('请先填写足够的文章内容，以便AI分析');
                return;
            }

            try {
                this.aiSuggesting = true;

                // 准备提示词
                const title = this.articleForm.title || '无标题';
                const content = this.articleForm.contentMd;
                // 如果内容太长，只取前1000字符和后500字符进行分析
                const truncatedContent = content.length > 1500 
                    ? content.substring(0, 1000) + '\n...\n' + content.substring(content.length - 500) 
                    : content;

                // 准备分类和标签数据
                const categoriesData = this.categories.map(cat => ({
                    id: cat.id,
                    name: cat.name
                }));
                const tagsData = this.tags.map(tag => ({
                    id: tag.id,
                    name: tag.name
                }));

                // 组装提示词
                const prompt = `
分析以下文章的内容，并从给定的分类和标签列表中推荐最合适的选项。

文章标题: ${title}

文章内容摘要:
${truncatedContent}

可用分类列表:
${JSON.stringify(categoriesData)}

可用标签列表（可多选，最多3个）:
${JSON.stringify(tagsData)}

请按以下JSON格式返回推荐结果（不要添加任何其他文本）:
{
  "categoryId": 推荐的分类ID（单选）,
  "tagIds": [推荐的标签ID列表（最多3个）],
  "explanation": "简短说明为什么选择这些分类和标签"
}
                `;

                // 调用 AI API
                const response = await this.callAiApi(prompt, true);
                
                let result;
                try {
                    // 尝试解析JSON
                    result = JSON.parse(response);
                } catch (e) {
                    // 如果不是标准JSON格式，尝试从文本中提取JSON
                    const jsonMatch = response.match(/\{[\s\S]*\}/);
                    if (jsonMatch) {
                        result = JSON.parse(jsonMatch[0]);
                    } else {
                        throw new Error('无法解析AI返回的结果');
                    }
                }

                // 应用推荐
                if (result) {
                    if (result.categoryId) {
                        this.articleForm.categoryId = result.categoryId;
                    }
                    if (result.tagIds && Array.isArray(result.tagIds) && result.tagIds.length > 0) {
                        this.articleForm.tagIds = result.tagIds;
                    }

                    // 显示推荐理由
                    if (result.explanation) {
                        this.$notify({
                            title: 'AI分类推荐成功',
                            message: result.explanation,
                            type: 'success',
                            duration: 5000
                        });
                    } else {
                        this.$message.success('AI成功推荐了分类和标签');
                    }
                }
            } catch (error) {
                console.error('AI推荐分类失败:', error);
                this.$message.error('AI推荐分类失败：' + (error.message || '未知错误'));
            } finally {
                this.aiSuggesting = false;
            }
        },

        /**
         * 调用AI API（带结构化输出选项）
         */
        async callAiApi(prompt, jsonMode = false) {
            try {
                const systemPrompt = jsonMode 
                    ? "你是一位能够精确理解文章内容并分类的助手。请根据要求以JSON格式输出，不要添加其他内容，确保输出可以被直接解析为JSON。"
                    : "你是一位专业的技术文章创作助手，擅长撰写高质量的Markdown格式文章。你的文章要有深度、有逻辑性，观点鲜明，论述有力，包含实用的代码示例和详细解释。";
                
                const response = await axios({
                    method: 'post',
                    url: 'https://api.siliconflow.cn/v1/chat/completions',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${this.aiApiKey}`
                    },
                    data: {
                        model: "deepseek-ai/DeepSeek-R1-0528-Qwen3-8B",
                        messages: [
                            {
                                role: "system",
                                content: systemPrompt
                            },
                            {
                                role: "user",
                                content: prompt
                            }
                        ],
                        temperature: jsonMode ? 0.1 : 0.7,
                        max_tokens: 3000,
                        response_format: jsonMode ? { type: "json_object" } : undefined
                    }
                });
                
                if (response.data && response.data.choices && response.data.choices.length > 0) {
                    return response.data.choices[0].message.content;
                } else {
                    throw new Error('API返回格式不正确');
                }
            } catch (error) {
                console.error('AI API调用失败:', error);
                throw error;
            }
        },
        
        /**
         * 保存草稿
         */
        async saveDraft() {
            const status = this.statusList.filter(item => {
                if (item.label === '草稿') {
                    return item.value
                }
            })
            this.articleForm.status = status[0].value
            await this.submitArticle()
        },
        /**
         * 发布文章
         */
        async publishArticle() {
            const status = this.statusList.filter(item => {
                if (item.label === '审核') {
                    return item
                }
            })
            this.articleForm.status = status[0].value
            await this.submitArticle()
        },
        /**
         * 提交文章
         */
        submitArticle() {
            if (this.isSubmitting) return
            this.$refs.articleForm.validate(valid => {
                if (!valid) return
                this.isSubmitting = true
                this.articleForm.content = this.$refs.mdRef.d_render;
                const api = this.articleForm.id ? updateArticleApi : createArticleApi
                console.log('Submitting article to:', api)
                api(this.articleForm).then(res => {
                    this.$message.success('保存成功')
                    this.$router.push('/user/profile')
                }).catch(err => {
                    console.error('Article submission error:', err)
                    this.$message.error(err.message || '提交失败，请检查网络连接和API权限')
                }).finally(() => {
                    this.isSubmitting = false
                })
            })
        },
        /**
         * 删除图片
         */
        imgDel(pos, $file) {
            console.log(pos)
            deleteFileApi(pos[0]).then(res => {
                this.$refs.mdRef.$img2Url(pos, '');
            });
        },
        /**
         * 添加图片
         */
        imgAdd(pos, $file) {
            const formdata = new FormData();
            formdata.append("file", $file);
            uploadFileApi(formdata,'article-content').then(res => {
                this.$refs.mdRef.$img2Url(pos, res.data);
            });
        },
        /**
         * 触发封面上传
         */
        triggerCoverUpload() {
            this.$refs.coverInput.click()
        },
        /**
         * 封面上传
         */
        handleCoverUpload(e) {
            const file = e.target.files[0]
            if (!file) return

            const formData = new FormData()
            formData.append('file', file)

            uploadFileApi(formData,'article-cover').then(res => {
                if (res.code === 200) {
                    this.articleForm.cover = res.data
                    this.$message.success('上传成功')
                } else {
                    this.$message.error(res.message || '上传失败')
                }
            }).catch(error => {
                this.$message.error('上传失败，请重试')
            })

            // 清空 input 的值，这样可以重复上传同一个文件
            e.target.value = ''
        },
        /**
         * 删除封面
         */
        removeCover() {
            this.articleForm.cover = ''
        },
        /**
         * 预览CSDN文章内容
         */
        async previewCsdnContent() {
            if (!this.aiForm.csdnRef) {
                this.$message.warning('请先输入CSDN链接');
                return;
            }
            
            this.fetchingCsdn = true;
            try {
                const content = await this.fetchCsdnContent(this.aiForm.csdnRef);
                if (content) {
                    // 使用mavon-editor转换Markdown为HTML
                    // 这需要mavon-editor的相关函数支持
                    try {
                        // 尝试使用mavon-editor实例进行渲染
                        const htmlContent = this.$refs.mdRef.markdownIt.render(content);
                        this.csdnPreview = htmlContent;
                    } catch (renderError) {
                        console.error('Markdown渲染失败，显示原始内容:', renderError);
                        // 简单替换处理，保持基本格式
                        this.csdnPreview = this.simpleMarkdownToHtml(content);
                    }
                    
                } else {
                    this.$message.warning('无法获取CSDN文章内容');
                }
            } catch (error) {
                console.error('预览CSDN内容失败:', error);
                this.$message.error('预览CSDN内容失败：' + (error.message || '未知错误'));
            } finally {
                this.fetchingCsdn = false;
            }
        },
        
        /**
         * 简单的Markdown到HTML转换
         */
        simpleMarkdownToHtml(markdown) {
            if (!markdown) return '';
            
            // 简单替换Markdown语法为HTML
            let html = markdown
                // 标题转换 (h1-h6)
                .replace(/^# (.*$)/gm, '<h1>$1</h1>')
                .replace(/^## (.*$)/gm, '<h2>$1</h2>')
                .replace(/^### (.*$)/gm, '<h3>$1</h3>')
                .replace(/^#### (.*$)/gm, '<h4>$1</h4>')
                .replace(/^##### (.*$)/gm, '<h5>$1</h5>')
                .replace(/^###### (.*$)/gm, '<h6>$1</h6>')
                // 图片
                .replace(/!\[(.*?)\]\((.*?)\)/g, '<img alt="$1" src="$2">')
                // 链接
                .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank">$1</a>')
                // 粗体
                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                // 斜体
                .replace(/\*(.*?)\*/g, '<em>$1</em>')
                // 代码块
                .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
                // 段落和换行
                .replace(/\n\n/g, '<br><br>');
            
            return html;
        },
    }
}
</script>

<style lang="scss" scoped>
.editor-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


.editor-main {
    flex: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 40px;
    width: 100%;

    .el-form {
        display: flex;
        gap: 24px;
    }
}

.editor-content {
    flex: 1;
    min-width: 0;

    .content-card {
        background: var(--card-bg);
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        padding: 24px;
        margin-bottom: 24px;

        &:last-child {
            margin-bottom: 0;
        }

        &.flex-card {
            flex: 1;
            display: flex;
            flex-direction: column;

            :deep(.el-form-item) {
                flex: 1;
                display: flex;
                flex-direction: column;
                margin-bottom: 0;

                .el-form-item__content {
                    flex: 1;
                    display: flex;
                    flex-direction: column;

                    .el-textarea {
                        flex: 1;
                        display: flex;

                        textarea {
                            flex: 1;
                            resize: none;
                        }
                    }
                }
            }
        }
    }

    :deep(.el-form-item) {
        margin-bottom: 0;

        .el-form-item__label {
            padding-bottom: 12px;
            font-size: 13px;
            color: #999;
            font-weight: normal;
        }
    }

    .title-cover-layout {
        display: flex;
        gap: 24px;
        align-items: flex-start;

        .title-section {
            flex: 1;
        }

        .cover-section {
            width: 240px;
            flex-shrink: 0;
        }
    }

    .cover-area {
        width: 100%;
        height: 135px;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        background: var(--card-bg);
        border: 1px dashed var(--border-color);
        transition: all 0.15s;

        &:hover {
            border-color: #409EFF;
        }
    }

    .cover-placeholder {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #999;

        i {
            font-size: 24px;
        }

        span {
            font-size: 13px;
        }
    }

    .cover-preview {
        height: 100%;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .cover-actions {
            position: absolute;
            top: 12px;
            right: 12px;
            opacity: 0;
            transition: all 0.15s;
        }

        &:hover .cover-actions {
            opacity: 1;
        }
    }
}

.editor-sidebar {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;

    .sidebar-section {
        background: var(--card-bg);
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        padding: 24px;

        .section-title {
            font-size: 13px;
            font-weight: 500;
            color: #999;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;

            i {
                font-size: 14px;
                color: #409EFF;
            }
        }

        .setting-item {
            padding: 12px 0;
            border-bottom: 1px solid var(--border-color);

            &:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }

            &:first-child {
                padding-top: 0;
            }

            .setting-label {
                font-size: 13px;
                color: #999;
                margin-bottom: 8px;
            }

            :deep(.el-form-item) {
                margin-bottom: 0;
            }
        }
    }
}

/* AI助手相关样式 */
.ai-assistant-toolbar {
    margin-bottom: 12px;
    display: flex;
    justify-content: flex-end;
}

.ai-dialog-content {
    padding: 0 20px;
    
    .ai-description {
        color: #666;
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 1.6;
    }
}

@media screen and (max-width: 1200px) {


    .editor-main {
        padding: 24px;

        .el-form {
            flex-direction: column;
        }
    }

    .editor-sidebar {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {


    .editor-main {
        padding: 16px;

        .el-form {
            gap: 16px;
        }
    }

    .editor-content {
        .content-card {
            padding: 20px;
            margin-bottom: 16px;
        }

        .cover-area {
            height: 120px;
        }
    }

    .editor-sidebar {
        gap: 16px;

        .sidebar-section {
            padding: 20px;
        }
    }

    .title-cover-layout {
        flex-direction: column;
        gap: 16px;

        .cover-section {
            width: 100%;
        }
    }
}

.v-note-wrapper{
    background: var(--card-bg)!important;
    color: var(--text-secondary)!important;
}
:deep(.content-input-wrapper){
    background: var(--card-bg)!important;
    .auto-textarea-input,.no-border,.no-resize{
        color: var(--text-secondary)!important;
        background: var(--card-bg)!important;
    }
}

/* AI推荐分类和标签按钮样式 */
.ai-suggest {
    margin-top: 8px;
    text-align: right;
    
    .el-button {
        padding: 0;
        font-size: 12px;
        
        i {
            margin-right: 4px;
            color: #409EFF;
        }
    }
}

/* CSDN预览样式 */
.csdn-preview {
    margin-top: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    
    .preview-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        background: #f5f7fa;
        border-bottom: 1px solid var(--border-color);
        font-size: 13px;
        color: #606266;
    }
    
    .preview-content {
        max-height: 300px;
        overflow-y: auto;
        padding: 12px;
        font-size: 14px;
        line-height: 1.6;
        
        pre {
            background: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
            overflow-x: auto;
        }
        
        img {
            max-width: 100%;
            height: auto;
        }
        
        h1, h2, h3, h4, h5, h6 {
            margin-top: 16px;
            margin-bottom: 8px;
        }
    }
}
</style>